<template>
	<view class="mycard">
		<view class="display_flex" style="justify-content: center;">
			<view class="avatar_box">
				<image v-if="userinfo.avatar" class="avater_img"
					:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:picUrl+userinfo.avatar" mode="aspectFill">
				</image>
				<image v-else class="avater_img"
					:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:onlinePic+'avatar.png'" mode="aspectFill">
				</image>
				<image v-if="userinfo.avatar_border" class="my_avatar_border" :src="picUrl+userinfo.avatar_border">
				</image>
			</view>
		</view>
		<view class="card_box">
			<view class="text-c">
				<image class="mycard_qrcode" :src="onlinePic+'experience_img.jpg'"></image>
			</view>
			<view class="f-12 mt-15 c-999999 text-c">扫一扫添加我为好友</view>
		</view>
		<view class="mycard_bottom">
			<view class="text-c">
				<view class="f-14">保存</view>
				<view class="mycard_icon_box mt-10"><uni-icons type="download" size="26"></uni-icons></view>
			</view>
			<button class="share_cell text-c" open-type="share">
				<view class="f-14">分享</view>
				<view class="mycard_icon_box mt-10"><uni-icons type="redo" size="26"></uni-icons></view>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getList,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				userinfo: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {

		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo')
		},
		methods: {

		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.mycard {
		padding: 50rpx;

		.avatar_box {
			// 框150x150，头像120x120 :框和头像的比例是5：4 
			width: 190rpx;
			height: 190rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.avater_img {
				width: 152rpx;
				height: 152rpx;
				border-radius: 100%;
			}

			.my_avatar_border {
				width: 190rpx;
				height: 190rpx;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 1;
			}

			.avater_v_icon {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: 10rpx;
				bottom: 0;
				z-index: 1;
			}
		}

		.mycard_qrcode {
			width: 300rpx;
			height: 300rpx;
			margin-top: 30rpx;
		}

		.mycard_bottom {
			font-size: 26rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.mycard_icon_box {
				width: 95rpx;
				height: 95rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				border: 2rpx solid #3a3a3a;
			}

			.share_cell {
				line-height: normal;
				background-color: transparent;
				box-sizing: content-box;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
			
			button {
				padding-left: 0;
				padding-right: 0;
				margin-left: 0;
				margin-right: 0;
				line-height: 1.2 !important;
				background-color: transparent !important;
			}
			
			button:after {
				border: none !important;
			}
		}

	}
</style>